<template>
  <div>
    <el-form style="text-align: center">
      <el-card style="width: 40%;margin-left: 30%;margin-top: 10%">
        <span style="font-size: 200%">{{questionnaire.title}}</span>
        <el-divider></el-divider>
        <el-form-item label="选择群组(可为空)">
          <el-select v-model="currentGroupId" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label + '   (id:' +item.value+')'"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设置结束日期(可为空)">
          <el-date-picker
              v-model="endTime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="答卷次数(0为不限次数)">
          <el-input-number v-model="submit" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-button @click="publish">发布</el-button>
      </el-card>
    </el-form>

    <dialog :visible.sync="dialogVisible">
      已生成链接：http://localhost:8080/AnswerQuestionnaire?questionnaireId={{questionnaire.id}}
    </dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      currentGroupId:'',
      questionnaire:{
        id:'',
        userId:'',
        question:'',
        content:'',
        title:'',
        questionNumber:'',
        state:'',
        answerNumber:'',
      },
      endTime:'',
      options:[],
      group_list:[],
      submit:'',
      dialogVisible:false
    }
  },
  methods:{
    publish(){
      console.log(this.currentGroupId)
      this.$http({
        url:"http://47.104.100.60:81/insertAnswer",
        method:"post",
        data:{
          questionnaire_id: this.questionnaire.id,
          user_id: '',
          answer: "",
          start_time: "",
          end_time: this.endTime,
          state: "模板",
          submit: this.submit,
        }
      }).then(res =>{

      }).catch(err=>{
        console.log(err)
      })
      this.$http({
        url:" http://47.104.100.60:83/updateQuestionnaire",
        method:"post",
        data:{
          id: this.questionnaire.id,
          userId: this.questionnaire.userId,
          question: this.questionnaire.question,
          content: this.questionnaire.content,
          title: this.questionnaire.title,
          questionNumber: this.questionnaire.questionNumber,
          state: "已发布",
          answerNumber: this.questionnaire.answerNumber,
          groupId: this.currentGroupId
        }
      }).then(res =>{

      }).catch(err=>{
        console.log(err)
      })
      this.dialogVisible=true
    }

  },

  mounted(){
    this.$http({
      url:"http://47.104.100.60:83/findById",
      method:"post",
      data:{
        id:sessionStorage.getItem('userId')
      }
    }).then(res =>{
      // console.log(res.data)
      // console.log(res.data.question)
      this.questionnaire=res.data
      console.log(this.questionnaire)

      this.$http({
        url:"http://47.104.100.60:82/getGroupByUserId",
        method:"post",
        data:{
          userId:this.questionnaire.userId
        }
      }).then(res =>{
        // console.log(res.data)
        // console.log(res.data.question)
        this.group_list = res.data

        var total = this.group_list.length
        //  为groupall赋值
        for(let i = 0; i<total; i++){
          this.options.push({
            value: this.group_list[i].id,
            label: this.group_list[i].name
          })
        }
      }).catch(err=>{
        console.log(err)
      })
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>